<!doctype html>
<html lang="zh-CN">
 
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
    <title>轨迹详情</title>
	<link rel="stylesheet" href="http://img.zgwqjc.cn/qczhg/css/card.css"/>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
	
    .input-card .btn{
		margin-right: 1.2rem;
		width: 9rem;
		z-index: 999;
	}

	.input-card .btn:last-child{
		margin-right: 0;
	}
    </style>
</head>
 
<body>
    <div id="container"></div>
    <div class="input-card">
        <h4>轨迹回放控制</h4>
		<div>
		    <span>行驶距离：</span><span id="distance"></span>
			
		</div>
		<div>
			<span>车辆坐标：</span><span id="position"></span>
		</div>
		<!-- <div>
			<span>车辆位置：</span><span id="address"></span>
		</div> -->
        <div class="input-item">
            <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
            <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
        </div>
        <div class="input-item">
            <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
            <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
        </div>
    </div>
	<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=你的高德web端key'></script>
    <!-- <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=你的高德web端key&plugin=AMap.Geocoder'></script> -->
    <!-- UI组件库 1.0 -->
    <!-- <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> -->
	<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
	<!-- uni 的 SDK -->
	<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
    <script type="text/javascript">

	// var geocoder = new AMap.Geocoder({
	//         // city: "010", //城市设为北京，默认：“全国”
	//         radius: 1000 //范围，默认：500
	// });
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4,
		// zoomEnable:false,
		// dragEnable: false,
    });

	var trajectory = JSON.parse(getQuery('data')).trajectory
	console.log(trajectory);  //获取 uni-app 传来的值
	            
	            
	//取url中的参数值
	function getQuery(name) {
		// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
		let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		let r = window.location.search.substr(1).match(reg);
		// console.log(r);
		if(r != null) {
			// 对参数值进行解码
			return decodeURIComponent(r[2]);
		}
		return null;
	};

	//加载PathSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分 
	AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier, $) {
	
	    if (!PathSimplifier.supportCanvas) {
	        alert('当前环境不支持 Canvas！');
	        return;
	    }
	
	    //启动页面
	    initPage(PathSimplifier);
	});
	
	
	function initPage(PathSimplifier) {
		//创建组件实例
		var pathSimplifierIns = new PathSimplifier({
			zIndex: 100,
			map: map, //所属的地图实例
			clickToSelectPath: false,
			getPath: function(pathData, pathIndex) {
				//返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
				return pathData.path;
			},
			getHoverTitle: function(pathData, pathIndex, pointIndex) {
				//返回鼠标悬停时显示的信息
				if (pointIndex >= 0) {
					//鼠标悬停在某个轨迹节点上
					return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
				}
				//鼠标悬停在节点之间的连线上
				return pathData.name + '，点数量' + pathData.path.length;
			},
			renderOptions: {
				//轨迹线的样式
				renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
				pathLineStyle: {
					strokeStyle: 'red',
					lineWidth: 6,
					dirArrowStyle: true
				},
				pathNavigatorStyle: {
					
				}
			}
		})
		pathSimplifierIns.setData([{
			name: '轨迹0',
			path: trajectory
		}])
		function onload() {
		    // pathSimplifierIns.renderLater();
		}
		
		function onerror(e) {
			alert('图片加载失败！');
		}
		//创建一个巡航器
		var navg0 = pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
		{
			loop: false, //循环播放
			speed: 1000 ,//巡航速度，单位千米/小时
			pathNavigatorStyle: {
				width: 16,
				height: 32,											//换成你自己的图片地址
				content: PathSimplifier.Render.Canvas.getImageContent('http://img.zgwqjc.cn/qczhg/img/car.png', onload, onerror),
				strokeStyle: null,
				fillStyle: null
			}
		});
		
		navg0.start();
		navg0.on('move',function() {
			// console.log(navg0.getMovedDistance().toFixed(2)) 
			// geocoder.getAddress(navg0.getPosition(), function(status, result) {
			// 	document.getElementById('address').innerText =  !!result.regeocode.formattedAddress ? result.regeocode.formattedAddress : '未知'; 
			// });
			document.getElementById('distance').innerText = !!(navg0.getMovedDistance() / 1000).toFixed(2) ? (navg0.getMovedDistance() / 1000).toFixed(2) + 'km' : '未知'
			document.getElementById('position').innerText = !!(navg0.getPosition()) ? navg0.getPosition() : '未知'
		}) 
		//map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层

		window.startAnimation = function () {
		    navg0.start();
		};
		window.pauseAnimation = function () {
		    navg0.pause();
		};
		
		window.resumeAnimation = function () {
		    navg0.resume();
		};
		
		window.stopAnimation = function () {
		    navg0.stop();
		};
		
	};
	
	
	
	

    </script>
</body>
</html>